<template>
  <!-- 注册组件 -->
  <div class="box">
    <div class="login-bac"></div>
    <div class="register-container">
      <div class="register-box">
        <span class="register-to-login">
          已有账号？<a href="javascript:;" @click="toLogin">去登录</a>
        </span>
        <!-- 注册模块表单 start -->
        <el-form
          ref="registerFormRef"
          registerFormRef
          class="register-form"
          label-width="80px"
          :model="registerForm"
          :rules="registerRules"
        >
          <el-form-item label="账号" prop="uname">
            <el-input
              v-model="registerForm.uname"
              placeholder="请输入账号"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="真实姓名" prop="trueName">
            <el-input
              v-model="registerForm.trueName"
              placeholder="请输入真实姓名"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="registerForm.password"
              placeholder="请输入密码"
              show-password
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input
              v-model="registerForm.confirmPassword"
              placeholder="请再次输入密码"
              show-password
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="phone">
            <el-input
              v-model="registerForm.phone"
              placeholder="请输入电话"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input
              v-model="registerForm.age"
              placeholder="请输入年龄"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="registerForm.sex">
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item class="btns">
            <el-button class="btn-reset" size="small" @click="resetFormInput($event)">重置</el-button>
            <el-button
            class="btn-often"
              size="small"
              type="primary"
              @click="registerInputValidate($event)"
              >确定</el-button
            >
          </el-form-item>
        </el-form>
        <!-- 注册模块表单 end -->
      </div>
    </div>
  </div>
</template>

<script>
import btn from '../utils/btn.js'
export default {
  data() {
    // 确认密码自定义正则
    const checkPassword = (rule, val, callback) => {
      if (!val) {
        return callback(new Error('请确认密码！'))
      } else if (val !== this.registerForm.password) {
        return callback(new Error('密码不一致！'))
      } else {
        return callback()
      }
    }
    // 校验真实姓名(中文或英文)
    const checkTrueName = (rule, val, callback) => {
      const reg = /^[\u4e00-\u9fa5a-zA-Z]+$/
      if (!val) {
        return callback(new Error('请输入真实姓名！'))
      } else if (!reg.test(val)) {
        return callback(new Error('只能输入中文或英文！'))
      } else {
        return callback()
      }
    }
    // 校验电话11位
    const checkPhone = (rule, val, callback) => {
      const reg = /^1(3|4|5|6|7|8|9)([0-9]{9})$/
      if (!val) {
        return callback(new Error('请输入电话号码！'))
      } else if (!reg.test(val)) {
        return callback(new Error('电话号码不存在！'))
      } else {
        return callback()
      }
    }
    return {
      // 表单数据绑定
      registerForm: {
        uname: '',
        trueName: '',
        password: '',
        confirmPassword: '',
        phone: '',
        sex: '男',
        age: ''
      },
      // 表单验证规则绑定
      registerRules: {
        // 账号不能为空
        uname: [{ required: true, message: '账号不能为空', triggger: 'blur' }],
        // 密码不能为空
        password: [
          { required: true, message: '密码不能为空', triggger: 'blur' },
          { min: 5, max: 20, message: '密码在5~20个字符之间', triggger: 'blur' }
        ],
        // 确认密码
        confirmPassword: [
          {
            validator: checkPassword,
            required: true,
            triggger: 'blur'
          }
        ],
        // 真实姓名不能为空
        trueName: [
          { validator: checkTrueName, required: true, triggger: 'blur' },
          { min: 2, max: 20, message: '账号在2~20个字符之间', triggger: 'blur' }
        ],
        // 电话不能为空
        phone: [{ validator: checkPhone, required: true, triggger: 'blur' }],
        // 性别不能为空
        sex: [{ required: true, message: '请选择性别', triggger: 'blur' }],
        // 年龄不能为空
        age: [{ required: true, message: '年龄不能为空', triggger: 'blur' }]
      }
    }
  },
  methods: {
    // 路由跳转至登录界面
    toLogin() {
      this.$router.push('login')
    },
    // 重置清空
    resetFormInput(e) {
      btn.preBtnFocus(e)
      this.$refs.registerFormRef.resetFields()
    },
    // 注册信息校验
    registerInputValidate(e) {
      btn.preBtnFocus(e)
      this.$refs.registerFormRef.validate(async (result) => {
        // console.log('校验结果', result)
        if (result) {
          const res = await this.$http.post('register', {
            account: this.registerForm.uname,
            password: this.registerForm.password,
            uname: this.registerForm.trueName,
            phone: this.registerForm.phone,
            sex: this.registerForm.sex,
            age: this.registerForm.age,
            email: '',
            role: '普通会员'
          })
          // console.log('res', res.data)
          if (res.data === '添加成功!') {
            this.$message.success('注册成功！欢迎登录!')
            this.$router.push('login')
          } else if (res.data === '账号名已存在!') {
            this.$message.warning('账号名已存在！请修改账号名！')
          } else {
            this.$message.warning('用户已存在！请勿反复注册！')
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang='less' scoped>
.box {
  height: 100vh;
}
// 背景
.login-bac {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: url('../assets/pic/back.jpg') no-repeat;
  filter: blur(2px);
  background-size: cover;
}
/* 主体 */
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.register-box {
  position: relative;
  width: 590px;
  height: 360px;
  border-radius: 25px;
  box-shadow: 0px 0px 10px #ddd;
  background-color: rgba(255, 255, 255, 0.8);
}

// 去登录
.register-to-login {
  position: absolute;
  top: 40px;
  right: 45px;
  color: black;
  font-size: 12px;
}
.register-to-login > a {
  color: blue;
  font-size: 16px;
  text-decoration: none;
}

// 注册模块表单
.register-form {
  box-sizing: border-box;
  width: 100%;
  padding: 0px 40px 0px 10px;
  margin-top: 90px;
}
.el-form {
  display: flex;
  flex-wrap: wrap;
}
.el-form-item {
  width: 50%;
}
img {
  width: 100%;
  height: 100%;
}
// 底部按钮
.btns {
  display: flex;
  justify-content: flex-end;
}
</style>